<template>
    <div>
        <AddRelate ref="relRef" @getDataList="getDataList(1)" />
        <div class="com_box">
            <div class="sch_head flexbox flexcenter">
                <div class="flexbox flexcenter">
                    <div class="sch_tab active">千川</div>
                    <div class="sch_tab" @click="switchTab('/empower_tk')">TIkTok</div>
                </div>
            </div>
            <div class="sch_rank">
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <span class="font_14 color_01">筛选</span>
                        <div class="rank_line" style="margin-left:12px"></div>
                        <div class="reset_btn" @click="resetFun">重置</div>
                        <div class="rank_line"></div>
                        <img src="../../assets/img/down_icon.svg" alt="" class="rank_down" :class="{'rank_up':!showrank}" @click="showrank = !showrank">
                    </div>
                </div>
            </div>
            <div class="sch_hight flexbox" v-if="showrank">
                <div class="flexbox flexcenter flex">
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">广告状态</span>
                            <span class="drop_title">{{adverStatusText.length>0?adverStatusText.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':adverStatusText.length>0}">已选 {{adverStatusText.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilterRadio('adverStatusText','is_available')" v-if="adverStatusText.length>0">清除已选</el-link>
                            </div>
                            <el-radio-group v-model="queryInfo.is_available" class="check_style" @change="changeRadio(adverStatus,queryInfo.is_available,'adverStatusText','nickname')">
                                <el-radio :label="item.id" v-for="(item,index) in adverStatus" :key="index">
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-radio>
                            </el-radio-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">拉取状态</span>
                            <span class="drop_title">{{pullStatusText.length>0?pullStatusText.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':pullStatusText.length>0}">已选 {{pullStatusText.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilterRadio('pullStatusText','is_pull_creativity')" v-if="pullStatusText.length>0">清除已选</el-link>
                            </div>
                            <el-radio-group v-model="queryInfo.is_pull_creativity" class="check_style" @change="changeRadio(pullStatus,queryInfo.is_pull_creativity,'pullStatusText','nickname')">
                                <el-radio :label="item.id" v-for="(item,index) in pullStatus" :key="index">
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-radio>
                            </el-radio-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <div class="rank_line"></div>
                    <el-dropdown :hide-on-click="false" trigger="click" placement='bottom'>
                        <div class="flexbox flexcenter drop_box drop_hover">
                            <span class="drop_text">小店随心推状态</span>
                            <span class="drop_title">{{relateStatusText.length>0?relateStatusText.toString():'全部'}}</span>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                        <el-dropdown-menu slot="dropdown">
                            <div class="dropdown_hascheck flexbox flexcenter">
                                <span class="hascheck_num" :class="{'hascheck_num_color':relateStatusText.length>0}">已选 {{relateStatusText.length}} 项</span>
                                <div class="rank_line" style="margin:0 10px"></div>
                                <el-link type="primary" :underline="false" @click="clearFilterRadio('relateStatusText','is_follow')" v-if="relateStatusText.length>0">清除已选</el-link>
                            </div>
                            <el-radio-group v-model="queryInfo.is_follow" class="check_style" @change="changeRadio(relateStatus,queryInfo.is_follow,'relateStatusText','nickname')">
                                <el-radio :label="item.id" v-for="(item,index) in relateStatus" :key="index">
                                    <span class="el_check_title">{{item.nickname}}</span>
                                    <span class="el-icon-check el_check_icon"></span>
                                </el-radio>
                            </el-radio-group>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-input placeholder="请输入" size="small" v-model="queryInfo.query" style="width:310px" clearable class="input-with-select" @change="getDataList(1)">
                        <i slot="suffix" class="el-input__icon">
                            <svg width="16" height="16" style="margin-top:7px;margin-right:5px;cursor: pointer;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" @click="getDataList(1)">
                                <path d="M12.0207 11.078L14.4043 13.4611C14.6648 13.7215 14.6648 14.1439 14.4043 14.4043C14.1438 14.6648 13.7215 14.6648 13.4611 14.4043L11.078 12.0207C10.0158 12.8722 8.69467 13.3353 7.33333 13.3333C4.02133 13.3333 1.33333 10.6453 1.33333 7.33334C1.33333 4.02134 4.02133 1.33334 7.33333 1.33334C10.6453 1.33334 13.3333 4.02134 13.3333 7.33334C13.3353 8.69468 12.8721 10.0158 12.0207 11.078ZM10.6833 10.5833C11.5294 9.71327 12.0019 8.54696 12 7.33334C12 4.75468 9.91133 2.66668 7.33333 2.66668C4.75467 2.66668 2.66667 4.75468 2.66667 7.33334C2.66667 9.91134 4.75467 12 7.33333 12C8.54695 12.0019 9.71326 11.5294 10.5833 10.6833L10.6833 10.5833Z" fill="#B4B7BD" />
                            </svg>
                        </i>
                        <el-select v-model="queryInfo.select" slot="prepend" placeholder="请选择" class="adver_select">
                            <el-option label="店铺名称" value="account_name"></el-option>
                            <el-option label="广告主ID" value="advertiser_id"></el-option>
                            <el-option label="账号名称" value="name"></el-option>
                        </el-select>
                    </el-input>
                </div>
            </div>
        </div>

        <div class="com_box" style="margin-top:12px" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="table_box">
                <div class="font_16 color_01" style="margin-bottom:16px">
                    广告主列表
                </div>
                <el-table :data="tableData" class="com_table" max-height="700px">
                    <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂无数据</div>
                    </div>
                    <el-table-column prop="account_name" label="店铺名称" min-width="210">
                    </el-table-column>
                    <el-table-column prop="advertiser_id" label="广告主ID" min-width="150">
                    </el-table-column>
                    <el-table-column prop="name" label="账户名称" min-width="310">
                    </el-table-column>
                    <el-table-column label="广告状态" width="120">
                        <template slot-scope="scope">
                            <el-switch @change="setAdverStatus(scope.row)" :value="scope.row.is_available" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="拉取状态" width="120">
                        <template slot-scope="scope">
                            <el-switch @change="setPullStatus(scope.row)" :value="scope.row.is_pull_creativity" :active-value="1" :inactive-value="0">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="小店随心推" width="250">
                        <template slot-scope="scope">
                            <div class="flexbox flexcenter">
                                <el-switch @change="setPullFollow(scope.row)" :value="scope.row.is_follow" :active-value="1" :inactive-value="0">
                                </el-switch>
                                <div class="flexbox flexcenter ad_relate">
                                    关联人：
                                    <span class="relate_name flex"><b>{{scope.row.follow_name?scope.row.follow_name:'暂未关联'}}</b></span>
                                    <svg @click="editRelate(scope.row)" class="edit_relate" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M5 15H15" stroke="#B4B7BD" stroke-width="1.14286" stroke-linecap="round" stroke-linejoin="round" />
                                        <path d="M5.71429 10.8143V12.8571H7.76759L13.5714 7.05074L11.5216 5L5.71429 10.8143Z" stroke="#B4B7BD" stroke-width="1.14286" stroke-linejoin="round" />
                                    </svg>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-link type="primary" :underline="false" @click="toDettails(scope.row)">日志</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page_box flexbox flexcenter" v-if="total>0">
                <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-size="queryInfo.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
                </el-pagination>
            </div>
        </div>

    </div>
</template>

<script>
import AddRelate from "./AddRelate";
export default {
    name: "",
    data() {
        return {
            showrank: true,
            loading: false,
            adverStatus: [
                {
                    id: 1,
                    nickname: "可用",
                },
                {
                    id: 0,
                    nickname: "不可用",
                },
            ],
            pullStatus: [
                {
                    id: 1,
                    nickname: "拉取",
                },
                {
                    id: 0,
                    nickname: "不拉取",
                },
            ],
            relateStatus: [
                {
                    id: 1,
                    nickname: "开启",
                },
                {
                    id: 0,
                    nickname: "关闭",
                },
            ],
            adverStatusText: [],
            pullStatusText: [],
            relateStatusText: [],
            queryInfo: {
                page: 1,
                limit: 20,
                select: "account_name",
                query: "",
                is_available: "",
                is_pull_creativity: "",
                is_follow: "",
            },
            total: 1,
            setpage: 1,
            tableData: [],
        };
    },
    created() {
        this.getDataList(1);
    },
    methods: {
        //获取列表
        async getDataList(page) {
            this.queryInfo.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "qcadmin/Qcaccount/get_advertiser",
                this.queryInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.tableData = res.data.list;
                this.total = res.data.count;
            }
        },

        // 广告主状态
        setAdverStatus(row) {
            let text = row.is_available == 1 ? "关闭" : "开启";
            this.$confirm(`请问是否${text}广告`, `${text}广告`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    let type = row.is_available == 1 ? 0 : 1;
                    const { data: res } = await this.$http.post(
                        "qcadmin/Qcaccount/adverStatus",
                        {
                            advertiser_id: row.advertiser_id,
                            is_available: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "操作成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        // 拉取状态
        setPullStatus(row) {
            let text = row.is_pull_creativity == 1 ? "关闭" : "开启";
            this.$confirm(`请问是否${text}拉取`, `${text}拉取`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    let type = row.is_pull_creativity == 1 ? 0 : 1;
                    const { data: res } = await this.$http.post(
                        "qcadmin/Qcaccount/pull_creativity",
                        {
                            advertiser_id: row.advertiser_id,
                            is_pull_creativity: type,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "操作成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        // 随心推状态
        setPullFollow(row) {
            let type = row.is_follow == 1 ? 0 : 1;
            if (type == 0) {
                this.swichPullFollow(row, type);
            } else {
                if (row.follow_name) {
                    this.swichPullFollow(row, type);
                } else {
                    this.$refs.relRef.dialogVisible = true;
                    this.$refs.relRef.addForm.advertiser_id = row.advertiser_id;
                    this.$refs.relRef.addForm.user_id = "";
                    this.$refs.relRef.addForm.is_follow = type;
                    this.$refs.relRef.getBrandList();
                }
            }
        },

        // 打开关闭随心推
        swichPullFollow(row, type) {
            let text = type == 0 ? "关闭" : "开启";
            this.$confirm(`请问是否${text}随心推`, `${text}随心推`, {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            })
                .then(async () => {
                    const { data: res } = await this.$http.post(
                        "qcadmin/Qcaccount/follow",
                        {
                            advertiser_id: row.advertiser_id,
                            is_follow: type,
                            user_id: row.follow_user_id,
                        }
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.$message({
                            type: "success",
                            message: "操作成功",
                        });
                        this.getDataList(this.setpage);
                    }
                })
                .catch(() => {});
        },

        // 编辑关联人
        editRelate(row) {
            this.$refs.relRef.dialogVisible = true;
            this.$refs.relRef.addForm.advertiser_id = row.advertiser_id;
            this.$refs.relRef.addForm.user_id =
                row.follow_user_id == 0 ? "" : row.follow_user_id;
            this.$refs.relRef.addForm.is_follow = row.is_follow;
            this.$refs.relRef.getBrandList();
        },

        // 单选筛选
        changeRadio(list, id, text, name) {
            let has_checked = [];
            list.forEach((element) => {
                if (element.id == id) {
                    has_checked = [element[name]];
                }
            });
            this[text] = has_checked;
            this.getDataList(1);
        },

        // 清除单选
        clearFilterRadio(text, id) {
            this.queryInfo[id] = "";
            this[text] = [];
            this.getDataList(1);
        },

        // 跳转详情
        toDettails(row) {
            let routeUrl = this.$router.resolve({
                path: "/adverlog",
                query: {
                    advertiser_id: row.advertiser_id,
                    account_name: row.account_name,
                },
            });
            window.open(routeUrl.href, "_blank");
        },

        // 重置
        resetFun() {
            this.queryInfo.select = "";
            this.queryInfo.query = "";
            this.queryInfo.is_available = "";
            this.queryInfo.is_pull_creativity = "";
            this.queryInfo.select = "account_name";
            this.adverStatusText = [];
            this.pullStatusText = [];
            this.getDataList(1);
        },

        // 跳转
        switchTab(path) {
            this.$router.push({
                path: path,
            });
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDataList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDataList(val);
        },
    },
    components: {
        AddRelate,
    },
};
</script>


<style scoped>
.sch_tab {
    height: 71px;
    font-size: 16px;
    color: #616c85;
    line-height: 71px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    font-weight: bold;
    color: #17233d;
}
.sch_tab.active::after {
    transform: scaleX(1);
}
.reset_btn {
    margin: 0 12px;
}
.ad_relate {
    height: 26px;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 14px;
    color: #616c85;
    margin-left: 16px;
}
.relate_name {
    width: 60px;
}
.edit_relate {
    cursor: pointer;
}
.edit_relate:hover {
    background: #ebebeb;
}
</style>
<style>
.input-with-select {
    margin-left: 10px;
}
.adver_select .el-input {
    width: 120px;
}
.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
</style>

